<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>Fetch</h1>
	</body>
	<script type="text/javascript">
		let url = 'data.json';

		// fetch 返回一个promise
		fetch(url).then(function(response) {
			return response.json();
		}).then(function(json) {
			console.log(json, typeof json)
		})
		
		// 请求一个图片
		let image = 'img/demo.jpg';

		fetch(image).then(response => {
			return response.blob();
		}).then(blob => {

			let url = URL.createObjectURL(blob);
			let img = document.createElement('img');

			img.src = url;

			document.body.appendChild(img);
		})
		
		// 像promise这样的异步操作被放入事件队列中，事件队列在主线程完成处理后运行，这样它们就不会阻止后续JavaScript代码的运行。排队操作将尽快完成，然后将结果返回到JavaScript环境。
		
	</script>

</html>
